<!--
 * @Author: 莫莫
 * @Phone: 13450159681
 * @Description: 
 * @Date: 2024-09-07 22:15:05
 * @LastEditTime: 2024-09-10 14:40:48
-->
<template>
	<view class="body p40" style="background-image: url(/static/image/bg.jpg);">
		<picker class="picker mb20 p20" mode="selector" :range="arr" @change="setArr">
			<view class="d-s-c">
				<text class="f34 fb mr10">{{ data.arr[data.aIndex] }}</text>
				<up-icon size="8" color="#000" name="arrow-down-fill"></up-icon>
			</view>
		</picker>
		<view class="d-s-c bg-white br30 p30">
			<up-avatar size="120rpx"></up-avatar>
			<view class="right ml40">
				<view class="f32">黑马青年</view>
				<view class="f28 sub mt10">
					<text>庆余电力打卡</text>
					<text class="register">（查看规则）</text>
				</view>
			</view>
		</view>
		<view class="bg-white br30 p30 mt40 daka">
			<view class="d-b-c">
				<view class="item br12 flex-1 mr20 p20">
					<view class="">上班09:15</view>
					<view class="sub f24 d-s-c mt10">
						<up-icon size="18" name="checkmark-circle-fill" color="#0190ff"></up-icon>
						<text class="ml10">09:01已打卡</text>
					</view>
				</view>
				<view class="item br12 flex-1 p20">
					<view class="">上班09:15</view>
					<view class="sub f24 mt10 d-s-c">未打卡</view>
				</view>
			</view>
			<view v-if="data.checked" class="check check1 d-c-c d-c br-50 mt80 tc">
				<view class="white f34 fb">外勤打卡</view>
				<view class="f28 white mt20">17:22:50</view>
			</view>
			<view v-else class="check check2 d-c-c d-c br-50 mt80 tc">
				<view class="white f34 fb">下班打卡</view>
				<view class="f28 white mt20">17:22:50</view>
			</view>
			<view class="sub f28 tc mt20 d-c-c">
				<up-icon name="map" size="15"></up-icon>
				<text class="ml10">广东省佛山市南海区里水镇天地广场F1层</text>
			</view>
		</view>
	</view>
</template>
<script setup>
import { reactive } from 'vue'
import { onLoad } from "@dcloudio/uni-app";
import { useStore } from "vuex"
import { test } from '@/uni_modules/uview-plus';
const store = useStore()
const data = reactive({
	arr: ['庆余电力有限公司'],
	aIndex: 0,
	checked: false,
})
</script>
<style scoped lang="scss">
.register {
	color: $uni-color-primary;
}

.daka {
	.item {
		background-color: #ededed;
	}
}

.check {
	width: 250rpx;
	height: 250rpx;
	border-radius: 50%;
	margin-left: auto;
	margin-right: auto;
}

.check1 {
	background-color: #01c085;
}

.check2 {
	background-color: #009dfe;
}
</style>